import React,{Component} from 'react'
import {connect} from 'react-redux'
import {initList,addList,deleteList,asyncList,logout} from '../store'
import {Link,Route} from 'react-router-dom'

function Detail({match,history,location,list}){
  const index=match.params.index
  const obj=list[index]
  return(
    <div>
      <p>{obj.username}</p>
      <p>{obj.content}</p>
    </div>
  )
}

const WrapperDetail=connect(
  (state)=>(
    {list:state.list}
  )
)(Detail)

class List extends Component{
  render(){
    return (
      <div>
        {
          this.props.list && this.props.list.map((item,index)=>(
            <div key={index}>
              <p>用户名：{item.username}</p>
              <p>评论内容：{item.content}</p>
              <button onClick={()=>{this.props.addList({
                username:'new',
                content:'我是新增的'
              })}}>新增</button>
              <button onClick={()=>{this.props.asyncList()}}>异步</button>
              <button onClick={()=>{this.props.deleteList(index)}}>删除</button>
              <button onClick={()=>{this.props.logout()}}>退出</button>
              <Link to={`/list/detail/${index}`}>{item.username}</Link>
              <Route path='/list/detail/:index' component={WrapperDetail} />
            </div>            
          ))
        }
      </div>
    )
  }
  componentDidMount(){
    this.props.initList([{
      username:'jerry',
      content:'测试初始化'
    }])
  }
}

const mapStateToPorps=(state)=>(
  {list:state.list}
)
const mapDispatchToProps={
  initList,
  addList,
  deleteList,
  asyncList,
  logout
}      

const WrapperList=connect(
  mapStateToPorps,
  mapDispatchToProps
)(List)

export default WrapperList